<template>
  <!-- <a-button type="primary" @click="handleSubmit" class="button"
    >再次提交</a-button
  > -->
  <a-button
    v-if="!readOnly && +$route.params.status === 700"
    type="primary"
    @click="handleAccept"
    class="button"
    >接受结果</a-button
  >
  <!-- <a-button type="primary" @click="handleApply">申请证书</a-button> -->
  <p class="detail">
    《{{ result.projectName }}》已完成评审，总换算得分：<span class="result"
      >{{ result.score }}分</span
    >（实际总分<span class="result">{{ result.actualScore }}分</span
    >/指标总分<span class="result">{{ result.namedScore }}分</span>）
  </p>
  <div class="charts">
    <Chart v-if="radarChartOptions" :options="radarChartOptions" />
    <Chart v-if="pieChartOptions" :options="pieChartOptions" />
  </div>
  <a-table
    v-if="dataSource"
    class="table"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    :scroll="{
      scrollToFirstRowOnChange: true,
      x: '100%',
    }"
    rowKey="id"
    defaultExpandAllRows
    :sticky="true"
    @resizeColumn="
        (w:number, col: ColumnItem) => {
          col.width = Math.max(w,col.minWidth||0);
        }
      "
  >
  </a-table>
</template>
<script lang="ts" setup>
import Chart from "@/components/Chart.vue";
import { getCurrentInstance, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getRadarChartOptions,
  getPieChartOptions,
  getApprovalColumns,
} from "./config";
import {
  IndicatorSystemDetailItem,
  acceptResult,
  getProjectIndicatorsById,
} from "@/api";
const props = defineProps<{ readOnly: boolean; routeNamePrefix: string }>();
const enum ResultType {
  Fail,
  Success,
}
const route = useRoute();
const router = useRouter();
const result = reactive({
  status: ResultType.Success,
  score: 0,
  actualScore: 0,
  namedScore: 0,
  projectName: "",
});
const columns = ref(getApprovalColumns());
const dataSource = ref<IndicatorSystemDetailItem[]>();
const radarChartOptions = ref();
const pieChartOptions = ref();
const { $loading } =
  getCurrentInstance()?.appContext?.config.globalProperties || {};
$loading?.start();
getProjectIndicatorsById(Number(route.params.id))
  .then((res) => {
    dataSource.value = res.indicators;
    result.score = res.score || 0;
    result.projectName = res.projectName;
    result.actualScore = res.actualScore || 0;
    result.namedScore = res.namedScore || 0;
    radarChartOptions.value = getRadarChartOptions(dataSource.value);
    pieChartOptions.value = getPieChartOptions(dataSource.value);
    if (res.status !== +route.params.status) {
      router.replace({
        name: route.name || "",
        params: {
          ...route.params,
          status: res.status,
        },
      });
    }
  })
  .catch(console.error)
  .finally(() => {
    $loading?.stop();
  });
const handleAccept = () => {
  $loading?.start();
  acceptResult(route.params.id as string)
    .then(() => {
      router.push({
        name: props.routeNamePrefix + "Projects",
      });
    })
    .catch(console.error)
    .finally(() => {
      $loading?.stop();
    });
};
</script>
<style lang="scss" scoped>
.detail {
  margin: 16px 0;
  font-weight: 600;
  font-size: 24px;
}
.result {
  color: #d9001b;
}
.button {
  margin-right: 8px;
}
.charts {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  & > * {
    width: 400px;
    height: 400px;
    flex: 1;
  }
}
</style>
